<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_语法-v-cloak(斗篷, 遮盖)指令使用</title>
  <!-- 
  在 Vue 中， `v-cloak`  指令用于防止未编译的 Vue 模板在页面加载时闪烁。它通过在 Vue 实例尚未完全初始化之前隐藏元素，从而避免用户看到未处理的模板语法（如  `{{ }}` ）或其他 Vue 特有的标记。
  1. 基本用法

  `v-cloak`  通常与 CSS 一起使用，以确保在 Vue 实例准备好之前，相关元素不会显示。以下是基本用法示例：
  <template>
    <div v-cloak>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!',
      };
    },
  };
  </script>

  <style>
  [v-cloak] {
    display: none; /* 在 Vue 实例准备好之前隐藏元素 */
  }
  </style>
  在这个例子中， `<div v-cloak>`  中的内容在 Vue 实例加载完成之前是不可见的，避免了用户看到  `{{ message }}`  的原始模板语法。

  2. 适用场景

  - 避免闪烁：当页面加载时，使用  `v-cloak`  可以防止用户看到未编译的模板，从而提升用户体验。
  - 与 CSS 结合：通常与 CSS 结合使用，以设置  `display: none`  或其他样式，确保元素在 Vue 实例初始化之前不被显示。

  3. 注意事项

  - CSS 选择器：需要确保 CSS 选择器  `[v-cloak]`  正确设置，这样才能有效隐藏元素。
  - 只在开发模式下使用：在生产环境中，通常不需要使用  `v-cloak` ，因为 Vue 的编译过程会在页面加载时完成。

  4. 总结

  -  `v-cloak`  指令：用于防止未编译的 Vue 模板在页面加载时闪烁。
  - 与 CSS 结合使用：通过 CSS 设置  `[v-cloak]`  的样式以隐藏元素。
  - 提升用户体验：避免用户看到未处理的模板语法。

  通过合理使用  `v-cloak`  指令，可以提升 Vue 应用的用户体验，确保在页面加载时不会出现不必要的视觉干扰。
  -->
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

  <div id="app">
    <h2 v-cloak>{{ message }} </h2>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    setTimeout(() => {
      const app = Vue.createApp({
        data() {
          return {
            message: "Hello World"
          }
        },
      })

      app.mount("#app")
    }, 3000)

  </script>
  
</body>
</html>